<template>
  <div id="menu">
    <div>
        <ul>
          <a href="https://mp.uekea.cn/app/index.php?i=2&c=entry&eid=46"><li :class="[classBool ? 'delay1 delay': '', cover ? 'noneDelay': '']">新古典风格</li></a>
          <a href="https://mp.uekea.cn/app/index.php?i=2&c=entry&eid=46"><li :class="[classBool ? 'delay2 delay': '', cover ? 'noneDelay': '']">古典欧式风格</li></a>
          <a href="https://mp.uekea.cn/app/index.php?i=2&c=entry&eid=46"><li :class="[classBool ? 'delay3 delay': '', cover ? 'noneDelay': '']">美式乡村风格</li></a>
          <a href="https://mp.uekea.cn/app/index.php?i=2&c=entry&eid=46"><li :class="[classBool ? 'delay4 delay': '', cover ? 'noneDelay': '']">地中海风格</li></a>
          <a href="https://mp.uekea.cn/app/index.php?i=2&c=entry&eid=46"><li :class="[classBool ? 'delay5 delay': '', cover ? 'noneDelay': '']">新中式风格</li></a>
          <a href="https://mp.uekea.cn/app/index.php?i=2&c=entry&eid=46"><li :class="[classBool ? 'delay6 delay': '', cover ? 'noneDelay': '']">北欧风格</li></a>
          <a href="https://mp.uekea.cn/app/index.php?i=2&c=entry&eid=46"><li :class="[classBool ? 'delay7 delay': '', cover ? 'noneDelay': '']">日式风格</li></a>
          <a href="https://mp.uekea.cn/app/index.php?i=2&c=entry&eid=46"><li :class="[classBool ? 'delay8 delay': '', cover ? 'noneDelay': '']">东南亚风格</li></a>
          <a href="https://mp.uekea.cn/app/index.php?i=2&c=entry&eid=46"><li :class="[classBool ? 'delay9 delay': '', cover ? 'noneDelay': '']">现代简约风格</li></a>
        </ul>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      classBool: false, //是否添加延时动画类名
      cover: false, //是否添加没有延时的类名
    }
  },
  mounted () {
    this.classBool = true; //添加动画类名
    // 等最后一个过渡2.2s效果完成，才添加没延时的类名，取消动画类名
    setTimeout(()=> {
      this.cover = true;
      this.classBool = false;
    },2300)
  },
}
</script>

<style lang="less" scoped>
ul {
  margin-top: 50px;
  li {
    font-size: 22px;
    list-style: none;
    text-indent: 50px;
    padding: 8px 0px;
    margin-left: -100px;
    opacity: 0;
    color: #eee;
  }
  li:hover {
    background-color: #ccc;
    color: #333;
  }
}
.delay {
  margin-left: 0px;
  opacity: 0.8;
  transition-duration: 0.5s;
}
.delay1{
  transition-delay: 0.2s;
}
.delay2{
  transition-delay: 0.4s;
}
.delay3{
  transition-delay: 0.6s;
}
.delay4{
  transition-delay: 0.8s;
}
.delay5{
  transition-delay: 1s;
}
.delay6{
  transition-delay: 1.2s;
}
.delay7{
  transition-delay: 1.4s;
}
.delay8{
  transition-delay: 1.6s;
}
.delay9{
  transition-delay: 1.8s;
}


// 取消过渡时间和延时
.noneDelay {
  margin-left: 0px;
  opacity: 0.8;
  transition-delay: 0s;
  transition-duration: 0s;
}

</style>